<template>
    <div class="homeVue">
        <div class="header">亲爱的{{ login.idcode == 1 ? '管理员' : '用户' }}，你好！</div>
        <div class="header">
            欢迎来到仓库后台管理系统！
        </div>
        <div class="admin" v-if="login.idcode == 1" ref="adminPieRef">

        </div>
        <div class="user" v-if="login.idcode == 0" ref="userPieRef">
            用户的数据界面
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, reactive, toRefs, onMounted } from 'vue';
import { useRoute, useRouter } from "vue-router";
import { HomeApi, newlogApi } from "../request/api";
import { LoginStore } from "../store/login";
import { GoodsStore } from "../store/goods";

const Router = useRouter();
const Route = useRoute();
const login = reactive(LoginStore());
const goods = reactive(GoodsStore());

let Processednum = ref("0");
let Untreatednum = ref("0");
let rentNumber = ref("0");
let returnNumber = ref("0");

HomeApi().then(res => {
    console.log(res);
    Processednum = res[29];
    Untreatednum = res[46];
    rentNumber = res[61];
    returnNumber = res[78];
    // console.log(res[29]);
    // console.log(res[46]);
    // console.log(res[61]);
    // console.log(res[78]);
})

const adminPieRef = ref();
const userPieRef = ref();

onMounted(() => {
    if (login.idcode == 1) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(adminPieRef.value);
        // 绘制图表
        myChart.setOption({
            title: { text: "管理员每日日志" },
            tooltip: {},
            xAxis: {
                data: ['货物总数', '已处理数量', '未处理数量', '租借数量', '归还数量']
            },
            yAxis: {},
            series: [
                {
                    name: '日志',
                    type: 'bar',
                    data: [goods.goodsList.length, Processednum, Untreatednum, rentNumber, returnNumber]
                }
            ]
        });
    }
    if (login.idcode == 0) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(userPieRef.value);
        // 绘制图表
        myChart.setOption({
            title: { text: "每日日志" },
            tooltip: {},
            xAxis: {
                data: ['货物总数', '管理员已处理数量', '管理员未处理数量', '今日总租借数量', '今日总归还数量']
            },
            yAxis: {},
            series: [
                {
                    name: '日志',
                    type: 'bar',
                    data: [goods.goodsList.length, Processednum, Untreatednum, rentNumber, returnNumber]
                }
            ]
        });
    }
})



</script>
 
<style lang = "less" scoped>
.homeVue {
    .header {
        width: 100%;
        text-align: center;
        font-size: 24px;
        line-height: 40px;
        height: auto;
    }

    .admin {
        width: 100%;
        height: 76vh;
    }

    .user {
        width: 100%;
        height: 76vh;
    }
}
</style>